<template>
	<view class="vip">
		<view class="start" v-if="data.status == 1">
			<view class="inviter">{{ data.name }}</view>
			<view class="tips">邀请您加入会员</view>
			<button @click="bindMerchant">加入</button>
		</view>
		<view class="success" v-else-if="data.status == 2">
			<uv-icon name="checkmark-circle" color="#fc4631" size="40"></uv-icon>
			<view class="red">加入成功！</view>
			<view class="tips">您已成为该商户的会员。</view>
		</view>
		<view class="error" v-else-if="data.status == 3">
			<uv-icon name="error-circle" color="#fc4631" size="40"></uv-icon>
			<view class="red">您已成为该商户的会员,请勿重复加入。</view>
		</view>
		<view class="error" v-else>
			<uv-icon name="error-circle" color="#fc4631" size="40"></uv-icon>
			<view class="red">您已绑定其他用户，无法再绑定该用户！</view>
			<view class="tips">已绑定商户：{{ data.otherName }}</view>
		</view>
	</view>
</template>

<script setup>
	import { merchant, merchantDetail } from '@/api';
	import { useAuthStore } from '@/stores';
	const userData = useAuthStore()
	const data = reactive({
		status: 1,
		name:'',
		otherName: ''
	})
		
	const getMidName = ()=> {
		const query = new URLSearchParams(window.location.search)
		const params = {
			mid: query.get('mid')
		}
		merchantDetail(params).then(res => {
			uni.hideLoading()
			if(res.code === 200001){
				data.name = res.data.nickname
			}else{
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		}).catch(error => {
			console.error('merchantDetail=',error);
		});
	}
	const bindMerchant = ()=> {
		const query = new URLSearchParams(window.location.search)
		const params = {
			mid: query.get('mid'),
			openid:uni.getStorageSync('openid')
		}
		merchant(params).then(res => {
			if(res.code === 200001){
				if(res.data.is_new_binding){
					data.status = 2
				}else{
					if(res.data.other_merchant_name !== ''){
						data.status = 4
						data.otherName = res.data.other_merchant_name
					}else{
						data.status = 3
					}
				}
			}else{
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		}).catch(error => {
			console.error('bindMerchant',error);
		});
	}
	
	onLoad(() => {
		uni.showLoading()
		const token = uni.getStorageSync('token')
		if(token){
			getMidName()
		}else{
			setTimeout(() => {
				getMidName();
			}, 500);
		}
	})
</script>

<style scoped lang="scss">
	page{background: #fafafa;}
	.vip{
		text-align: center;padding-top: 15vh;
		.inviter{color: #fc4631;font-size: 36rpx;font-weight: 600;}
		.tips{font-size: 26rpx;padding: 50rpx 0;}
		button{width: 360rpx;background: #fc4631;color: #fff;margin-top: 100rpx;}
		.red{color: #fc4631;}
		.uv-icon{justify-content: center;margin-bottom:60rpx;}
	}
	 
</style>